// import React from "../src/react";
// import ReactDOM from "../src/react-dom/client";
import React,{ useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
import ReactDOM from "react-dom/client";

function Counter (props) {
  return <h1>{props.count}</h1>
}

const MemoCounter = React.memo(Counter);

function ChildComponent(props){
  const { firstProp, secondProp } = props;
  console.log('子组件渲染');
  return (
    <div>
      <h2>子组件</h2>
      <p>firstProp: {firstProp}</p>
      <p>secondProp: {secondProp}</p>
    </div>
  )
}

const MemoChildComponent = React.memo(ChildComponent, function propsAreEqual(prevProps, nextProps){
  return prevProps.firstProp === nextProps.firstProp;
})

function ParentComponent(){
  const [firstProp, setFirstProp] = useState(0);
  const [ secondProp, setSecondProp ] = useState("初始值");
  const Memo = useMemo(() => {
    return <ChildComponent firstProp={firstProp} secondProp={secondProp}/>
  },[firstProp]);
  
  return (
    <div>
      <h1>父组件</h1>
      <button onClick={() => setFirstProp(prev => prev +1)}>改变第一个属性</button>
      <button onClick={() => setSecondProp(prev => prev +1)}>改变第二个属性</button>
      <MemoChildComponent firstProp={firstProp} secondProp={secondProp}/>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ParentComponent />);
